<template>
    <div ref="newsPage" class="news-div" >
      <span class="news-text">新闻动态</span>       
      <a-divider style="margin-top:20px;margin-bottom: 20px;" />    
       <!-- ref="newsPage" -->
      <div class="news-list-div" >
        
        <a-list item-layout="vertical" :loading="loading" size="large" :pagination="newsData.length>0?pagination:false" :data-source="newsData">
          <a-list-item slot="renderItem"  key="item.title" slot-scope="item, index" @click="onDetail(item,index)">
             
            <div v-if="index===0" class="news-list-text-first" @mousemove="changeImg()" @mouseout="changeImgBack()">
               <div v-if="ms_ie">
                  <img class="news-list-first-img-ie" v-if="item.contentImg!=undefined && JSON.parse(item.contentImg)[0]!=undefined" :src="imgPath+JSON.parse(item.contentImg)[0].path " />
                  <img class="news-list-first-img-ie" v-else  style="background:#ccc"/>
               </div>
               <div v-else>
                  <img class="news-list-first-img" v-if="item.contentImg!=undefined && JSON.parse(item.contentImg)[0]!=undefined" :src="imgPath+JSON.parse(item.contentImg)[0].path " />
                  <img class="news-list-first-img" v-else  style="background:#ccc"/>
               </div>
               
               <div class="news-list-first-text-div">
                 <div v-if="ms_ie">
                   <div class="news-list-first-title-ie" :title="item.contentTitle">{{item.contentTitle.length>40?item.contentTitle.slice(0,39)+'...':item.contentTitle}}</div>
                   <div class="news-list-first-content-ie" :title="item.contentDescription">{{item.contentDescription.length>114?item.contentDescription.slice(0,113)+'...':item.contentDescription}}</div>
                 </div>
                 <div v-else>
                   <div class="news-list-first-title" :title="item.contentTitle"><span class="title-span">{{item.contentTitle}}</span></div>
                   <div class="news-list-first-content" :title="item.contentDescription"><span class="content-span">{{item.contentDescription}}</span></div>
                 </div>
                
                 <div class="news-list-first-time-div">
                   <span style="color:#333333;font-size:24px;font-family: Microsoft YaHei;font-weight: 400;">{{ moment(item.contentDatetime).format('MM/DD') }}</span>
                   <span style="padding-left:10px;color:#666666;font-size:16px;">{{ moment(item.contentDatetime).format('YYYY') }}</span>
                   <img style="float:bottom;width:42px;height:14px;margin-top:8px;" :src="default_icon" align="right" />
                 </div>
               </div>
            </div>
            <div v-else class="news-list-text">
               <div class="news-list-time"> 
                 <div class="news-list-time-item">
                   <div><span class="news-list-time-item-one">{{ moment(item.contentDatetime).format('DD') }}</span></div>
                   <div><span class="news-list-time-item-two"><a-divider type="vertical" style="width:1px; background: #666666; height: 32px;margin-top: -8px;" /></span></div>
                   <div><span class="news-list-time-item-three">{{ moment(item.contentDatetime).format('YYYY.MM') }}</span></div>
                  </div>
                </div>
               <div :class="[ms_ie?'news-list-title-ie':'news-list-title']" class="news-list-title" :title="item.contentTitle"> {{item.contentTitle}}</div>
            </div>
          </a-list-item>
        </a-list>
      </div>
    </div>
</template>

<script>
import moment from "moment";
import emv from "@/views/center/emptyVue.vue";
import newsNoticeApi from '@/api/newsNotice'
  export default {
    name: "focusNews",
    data(){
      return{
        clientHeight:'',
        screenHeight:'',
        default_icon:'../../../static/icon_out.png',
        in_icon:'../../../static/icon_in.png',
        out_icon:'../../../static/icon_out.png',
        loading:false,
        ms_ie:false,
        imgPath:this.$globalConfig.adressPath,
        newsData:[],
        pageFilter: {
          contentCategoryId:"153",
          pageNo:1,
          pageSize:10 ,
        },
        pagination: {},
      }
      
    },
    mounted(){
     this.setFootStyle();
        
    },
    watch: {
      // 如果 `clientHeight` 发生改变，这个函数就会运行
      // clientHeight: function () {
      //   this.changeFixed(this.clientHeight)
      // }
    },
 
    created(){
      var ua = window.navigator.userAgent;
      var old_ie = ua.indexOf('MSIE ');
      var new_ie = ua.indexOf('Trident/');
      if ((old_ie > -1) || (new_ie > -1)) {
          this.ms_ie = true;
      }
      this.loading = true;
      this.get_news_list();
    },
    methods: {
      itemRender(current, type, originalElement) {
        if (type === 'prev') {
          return <a><i aria-label="图标: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i>上一页</a>;
        } else if (type === 'next') {
          return <a>下一页<i aria-label="图标: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a>;
        }
        return originalElement;
      },
     onDetail(item,index){
       this.$router.push({
          name:"newsDetail",
          query:{
            type:'detail',
            id:item.id,
            breadcrumbName:'新闻通知',
            routerLikeTo:'/center/newsPage/focusNewsPage'
          }
      });
     },
      getScreenHeight(){
        // 获取浏览器可视区域高度
        this.screenHeight =    document.body.clientHeight ; //`${document.documentElement.clientHeight}` 
        window.onresize = function temp() {
          this.screenHeight = document.body.clientHeight;
        };
      },
     
     async get_news_list() {
         await newsNoticeApi.get_notice_news_list(this.pageFilter).then(res => {
            this.newsData = res.rows;
            // console.log(this.imgPath+JSON.parse(this.newsData[0].contentImg)[0].path);
            this.loading = false;
            this.pagination = {
              onChange: (page,pageSize) => { 
                 this.pageFilter= {
                  contentCategoryId:"153",
                  pageNo:page,
                  pageSize:pageSize ,
                };
                this.onListChange(this.pageFilter);
              },
              pageSize: this.pageFilter.pageSize,
              total:res.total,
              showQuickJumper: true,
              itemRender:this.itemRender,
            };
           
          })
          .catch(err => {
            this.loading = false;
          });
          this.setFootStyle()
       
      },
      onListChange(pageFilter) {
        this.loading = true;
        this.pageFilter = pageFilter;
        this.get_news_list();
      },
      setFootStyle(){
        this.$nextTick(()=>{ // 页面渲染完成后的回调
                  this.getScreenHeight();
                  this.clientHeight = this.$refs.newsPage.offsetHeight+364;
                  
                   if(this.screenHeight>this.clientHeight){
                    if(this.screenHeight-this.clientHeight>40){
                      emv.$emit("setfootmargintop",this.screenHeight-this.clientHeight);
                    }else{
                       emv.$emit("setfootmargintop",40);
                    }
                  }else{
                    emv.$emit("setfootmargintop",40);
                  }
                
                });
      },
      changeImgBack(){
          this.default_icon = this.out_icon
      },
      changeImg(){
        this.default_icon = this.in_icon
      }
    },
  beforeRouteEnter(to, from, next) {
      // 设置下一个路由的 meta]
      next(vm=>{
          if(to.name=='focusNewsPage'){
            emv.$emit("setMenuKey",'2');
          }
         })
    },
  };
</script>
<style lang="less">
.news-div{
  .ant-divider-horizontal {
    display: block;
    clear: both;
    width: 100%;
    min-width: 100%;
    height: 1px;
    /* margin: 20px 0; */
    margin-top: 20px;
    // margin-left: -2px;
    // margin-bottom: -15px;
  }

  .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -6px;
    margin-top:-20px;
 }
}
.news-text{
  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #337BD7;
}
.news-list-div{
  // margin-left: -10px;
  .ant-list-items {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #fff;
    width: 100%;
   }
   .ant-list-split .ant-list-item {
    border-bottom: 0px;
  }
  .ant-pagination-options-quick-jumper {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    vertical-align: top;
    color: #808080;
  }
  .ant-pagination-prev, .ant-pagination-next, .ant-pagination-jump-prev, .ant-pagination-jump-next {
    display: inline-block;
    min-width: 32px;
    height: 32px;
    color: rgba(0, 0, 0, 0.65);
    font-family: Arial;
    line-height: 32px;
    text-align: center;
    vertical-align: middle;
    list-style: none;
    border-radius: 4px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .ant-pagination-total-text {
    display: inline-block;
    height: 32px;
    margin-right: 8px;
    line-height: 30px;
    vertical-align: middle;
    color: #808080;
  }
  .news-list-text{
    display: flex;
    color: #000;
    
    .news-list-time{
      width: 160px;
      .news-list-time-item{
        display: flex;
        width: 160px;
        background: #F5F5F5;
        text-align: center;
        height: 60px;
        line-height: 60px;
        padding-left: 22px;
        .news-list-time-item-one{
          font-size: 30px;
          font-family: Arial;
          font-weight: 400;
          color: #333333;
        }
        .news-list-time-item-two{
          margin-left: 3px;
          margin-right: 3px;
          color: #666666;
          opacity: 0.3;
          height: 32px;
          font-size: 30px;
        }
        .news-list-time-item-three{
          font-size: 16px;
          font-family: Arial;
          font-weight: 400;
          color: #666666;
        }
      }
    }

    .news-list-title{
      width: 1040px;
      margin-left: 30px;
      text-overflow: ellipsis;  /*超出内容用省略号*/
      overflow: hidden; /*内容超出后隐藏*/
      white-space: nowrap; /*文本不进行换行*/   
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #343434;
      line-height: 60px;
    }
    .news-list-title-ie{
       width: 1040px;
      margin-left: 75px;
      text-overflow: ellipsis;  /*超出内容用省略号*/
      overflow: hidden; /*内容超出后隐藏*/
      white-space: nowrap; /*文本不进行换行*/   
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #343434;
      line-height: 60px;
    }
   .news-list-title:hover,.news-list-title-ie:hover{
      color: #005AB5;
      cursor: pointer;
      font-weight: 600;
   }
  
  }

   .news-list-text-first{
     display: flex;
     color: #000;
     margin-top: -20px;
     border-bottom: 0.5px dotted #CCCCCC;
     padding-bottom: 20px;
     margin-left: -1px;
     .news-list-first-img{
        width: 360px;
        height: 220px;
     }
     .news-list-first-img-ie{
        width: 360px;
        height: 220px;
     }
     .news-list-first-text-div{
        /* width: 62%; */
        padding-left: 20px;
        /* margin-top: -6px; */
        height: 220px;
        line-height: 25px;
        width: 840px;
       .news-list-first-title-ie{
         white-space: normal;
         font-size: 24px;
         font-family: Microsoft YaHei;
         font-weight: 400;
         color: #333333;
         overflow: hidden;
         height: 73px;
         line-height: 35px;
            
       }
       .news-list-first-content-ie{
         white-space: normal;
         padding-top: 20px;
         font-size: 14px;
         font-family: Microsoft YaHei;
         font-weight: 400;
         color: #666666;
         height: 100px;
         line-height: 25px;
         overflow: hidden;
       }
       .news-list-first-title{
        // padding-top: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;//（行数）
        -webkit-box-orient: vertical;
        height: 73px;
        line-height: 35px;
      }
      .title-span{
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
      }

      .news-list-first-content{
        padding-top: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        height: 100px;
        line-height: 25px;
      }
      .content-span{
         font-size: 14px;
         font-family: Microsoft YaHei;
         font-weight: 400;
         color: #666666;
      }
       .news-list-first-time-div{
          width: 100%;
          margin-top: 24px;
       }
     }
   }
   .news-list-text-first:hover{
     color: #005AB5;
     cursor: pointer;
    //  font-weight: 600;
    //  .news-list-first-content-ie{
    //    color: #005AB5;  
    //  }
    //  .news-list-first-title-ie{
    //    color: #005AB5;  
    //    font-weight: 600;
    //  }
    //  .content-span{
    //    color: #005AB5;  
    //  }
    //  .title-span{
    //    color: #005AB5;  
    //    font-weight: 600;
    //  }

    
   }
}

</style>